<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebSocket 通用测试工具 🚀</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        input, textarea, button { margin-top: 10px; width: 100%; }
        #log { border: 1px solid #ccc; height: 300px; overflow: auto; padding: 10px; margin-top: 10px; background: #f9f9f9; }
        label { margin-top: 10px; display: block; }
    </style>
</head>
<body>

<h2>WebSocket 通用测试工具 🚀</h2>

<label>服务器 IP：</label>
<input type="text" id="serverIp" value="124.221.175.80">

<label>服务器端口：</label>
<input type="text" id="serverPort" value="8080">

<label>房间ID (roomId)：</label>
<input type="text" id="roomId" value="1">

<label>玩家Token：</label>
<input type="text" id="token" value="你的token">

<button onclick="connectSocket()">连接服务器</button>

<hr>

<label>封包类型 (type)：</label>
<input type="text" id="msgType" placeholder="比如 CHAT、OUT_CARD、PING 等">

<label>封包数据 (data)（JSON格式）：</label>
<textarea id="msgData" rows="5" placeholder='{ "content": "你好！", "quickId": 0 }'></textarea>

<button onclick="sendMessage()">发送封包</button>

<h3>日志输出：</h3>
<div id="log"></div>

<script>
    let socket = null;

    function connectSocket() {
        const ip = document.getElementById("serverIp").value.trim();
        const port = document.getElementById("serverPort").value.trim();
        const roomId = document.getElementById("roomId").value.trim();
        const token = document.getElementById("token").value.trim();

        if (!ip || !port || !roomId || !token) {
            log("❗ IP、端口、RoomId、Token 不能为空！");
            return;
        }

        const url = `ws://${ip}:${port}/ws/game?roomId=${roomId}&token=${token}`;
        log(`正在连接到 ${url}...`);
        socket = new WebSocket(url);

        socket.onopen = () => {
            log("✅ WebSocket连接成功！");
        };

        socket.onmessage = (event) => {
            log("📩 收到消息: " + event.data);
        };

        socket.onerror = (err) => {
            log("❌ 连接出错: " + err);
        };

        socket.onclose = () => {
            log("🔌 连接已关闭");
        };
    }

    function sendMessage() {
        if (!socket || socket.readyState !== WebSocket.OPEN) {
            log("❗ WebSocket未连接");
            return;
        }

        const type = document.getElementById("msgType").value.trim();
        const dataStr = document.getElementById("msgData").value.trim();

        if (!type || !dataStr) {
            log("❗ 封包类型或数据不能为空");
            return;
        }

        let dataObj;
        try {
            dataObj = JSON.parse(dataStr);
        } catch (e) {
            log("❗ JSON解析失败：" + e.message);
            return;
        }

        const packet = {
            type: type,
            data: dataObj
        };

        socket.send(JSON.stringify(packet));
        log(`📤 已发送：${JSON.stringify(packet)}`);
    }

    function log(message) {
        const logDiv = document.getElementById("log");
        logDiv.innerHTML += `[${new Date().toLocaleTimeString()}] ${message}<br>`;
        logDiv.scrollTop = logDiv.scrollHeight;
    }
</script>

</body>
</html>
